<template>
  <div class="sensitive-word-container">
    <div class="head">
      <el-input size="mini" v-model="param.keyword" clearable placeholder="输入名称搜索" class="custom-input" @keyup.enter="search">
        <template #append>
          <el-button size="mini" class="custom-btn" icon="el-icon-search" @click="search">搜索</el-button>
        </template>
      </el-input>
      <el-button style="margin-left: 10px;" @click="show(-1)" size="mini" type="primary">新增</el-button>
    </div>
    <el-table v-loading="dataLoading" :data="sensitiveWordList" size="small" style="width: 100%;">
      <el-table-column prop="name" label="名称"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button class="right-btn" @click="edit(scope.row)" size="mini">编辑</el-button>
          <el-button class="right-btn" @click="del(scope.row)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <page :total="total" @size-change="sizeChange" @current-change="currentChange"/>
    <el-dialog title="编辑" v-model="showDialog" :before-close="hide">
      <el-form :model="sensitiveWord" :rules="sensitiveWordRules" ref="sensitiveWordRef">
        <el-form-item label="名称：" label-width="80px" prop="name">
          <el-input size="mini" v-model="sensitiveWord.name" placeholder="请输入名称" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button size="mini" @click="hide">取 消</el-button>
          <el-button size="mini" type="primary" @click="submit">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  import {ref} from "vue"
  import Page from "../../../components/Page"
  import {
    getSensitiveWordList,
    removeSensitiveWord,
    saveSensitiveWord,
    updateSensitiveWord
  } from "../../../api/comment/sensitiveWord";
  import {confirm} from "../../../util/tipsUtils"
  export default {
    components: {
      Page
    },
    setup() {
      const total = ref(0)
      const sensitiveWordList = ref([])
      const param = ref({
        current: 1,
        size: 20,
        keyword: ""
      })
      const dataLoading = ref(true)
      const loadList = () => {
        dataLoading.value = true
        getSensitiveWordList(param.value, res => {
          console.log(res)
          sensitiveWordList.value = res.list
          total.value = res.total
          dataLoading.value = false
        })
      }
      loadList();
      // 页码改变
      const currentChange = (currentPage) => {
        param.value.current = currentPage;
        loadList()
      }
      // 页面显示数量改变
      const sizeChange = (size) => {
        param.value.size = size;
        loadList()
      }
      const search = () => {
        loadList()
      }
      const sensitiveWord = ref({
        id: "",
        name: ""
      })
      const sensitiveWordRules = {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }]
      }
      const sensitiveWordRef = ref(null)
      const showDialog = ref(false)
      const hide = () => {
        showDialog.value = false;
        sensitiveWord.value = {
          id: "",
          name: ""
        }
      }
      const show = (id) => {
        showDialog.value = true
        if (id > 0) {
          sensitiveWord.value.id = id
        } else {
          sensitiveWord.value.id = ""
        }
      }
      const edit = (item) => {
        sensitiveWord.value.name = item.name
        show(item.id)
      }
      const del = (item) => {
        confirm("确认删除该条数据？", "提示", () => {
          removeSensitiveWord({id: item.id}, () => {
            loadList()
          })
        })
      }
      const submit = () => {
        if (sensitiveWord.value.id) {
          updateSensitiveWord(sensitiveWord.value, () => {
            loadList()
            hide()
          })
        } else {
          saveSensitiveWord(sensitiveWord.value, () => {
            loadList()
            hide()
          })
        }
        console.log(sensitiveWord.value)
      }
      return {
        param,
        total,
        sensitiveWordList,
        currentChange,
        sizeChange,
        search,
        showDialog,
        hide,
        show,
        sensitiveWord,
        sensitiveWordRules,
        sensitiveWordRef,
        edit,
        del,
        submit,
        dataLoading
      }
    }
  }
</script>

<style scoped lang="scss">
  .sensitive-word-container {
    margin: 20px;
    .head {
      margin-bottom: 10px;
      .custom-input {
        width: 50%;
        min-width: 300px;
      }
      .custom-btn {
        color: #606266;
        &:hover {
          color: #415fff;
        }
      }
    }
  }
  .box-card {
    max-width: 500px;
  }
  .fl-table {
    border-radius: 5px;
    font-size: 12px;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    width: 100%;
    background-color: white;
  }
  .fl-table td {
    border: 1px solid #f8f8f8;
    font-size: 12px;
    padding: 12px;
  }
  .fl-table tr td:nth-child(1) {
    background: #F8F8F8;
    width: 30%;
    min-width: 100px;
  }
</style>
